<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      #app {
        display: flex;
        height: 100%;
      }

      #app textarea,
      #app div {
        flex: 1;
      }
      #app textarea {
        padding: 20px;
        font-size: 20px;
        font-family: "楷体";
        background-image: url("https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1654886392517-9e5158f7b437?ixid=MnwxMjA3fDB8MXx0b3BpY3x8cVBZc0R6dkpPWWN8fHx8fDJ8fDE2NzIzOTAxMDM&ixlib=rb-4.0.3&w=2560&h=1440&fmt=webp");
        background-size: cover;
        resize: none;
        outline: none;
        box-sizing: border-box;
        border-left: 1px solid violet;
      }
      #app div {
        background-image: url("https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1654886392517-9e5158f7b437?ixid=MnwxMjA3fDB8MXx0b3BpY3x8cVBZc0R6dkpPWWN8fHx8fDJ8fDE2NzIzOTAxMDM&ixlib=rb-4.0.3&w=2560&h=1440&fmt=webp");
        background-size: cover;
        padding-left: 30px;
        padding-top: 10px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <textarea v-model="val" @input="update"></textarea>
      <div v-html="mark"></div>
    </div>
  </body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/marked/1.2.7/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  //核心方法就是marked(输入值) 这个方法会自动将输入值转换成markdown html格式
  //实现防抖
  //定义防抖函数
  let defangdou = function (fn, time) {
    let timer = null;
    return function (e) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        if (fn) {
          fn = fn.bind(this);
          fn(e);
        }
      }, time);
    };
  };
  let vm = new Vue({
    el: "#app",
    data: {
      val: "# 一级标题",
    },
    computed: {
      mark() {
        return marked(this.val);
      },
    },
    methods: {
      update() {
        defangdou((e) => {
          console.log(e);
          //   this.val = e.target.value;
        }, 300);
      },
    },
  });
</script>
